<template>
    <transition name="slide"> 
        <music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
    </transition>
</template>
<script>
import {mapState} from 'vuex' //注册 getters
import {getSingerDetail} from '@/api/singer'
import {ERR_OK} from '@/api/config'
import {createSong} from '@/common/song' // 引入song类
import MusicList from '@/components/MusicList'

export default {
    name: 'singerDetail',

    components: {
        MusicList
    },

    data() {
        return {
            songs: []
        }
    },

    computed: {
        ...mapState([
            'singer'
        ]),

        title() {
            return this.singer.name
        },

        bgImage() {
            return this.singer.avatar
        },

    },
  
    methods: {
        _getSingerDetail() {
            if(!this.singer.id) {
                this.$router.push({
                    path: `/singer`
                })
                return;
            }
            getSingerDetail(this.singer.id).then((res) => {
                if(res.code == ERR_OK) {
                    this.songs = this._normalizeSongs(res.data.list);

                }
            })
        },

        _normalizeSongs(list) {
            let ret = [];
            list.forEach((element, index) => {
                let {musicData} = element;
                if(musicData.songid && musicData.albummid) {
                    ret.push(createSong(musicData))
                }   
            });
            return ret;
            
        }
    },

    created() {
        // console.log('ttt')
        this._getSingerDetail()
    }
}
</script>
<style scoped lang="stylus">
    .singerDetail {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #222;
    }

    .slide-enter-active, .slide-leave-active {
        transition: all .3s;
    }

    .slide-enter, .slide-leave-to {
        transform: translate3d(100%, 0, 0);
    }
</style>
